import axios from "@/utils/axios";
import React, { memo, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Tabs } from "react-vant";
import { ProductCard, NavBar } from "react-vant";
import style from './index.module.scss'
const Index: React.FC = memo(() => {
  const [list, setlist] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    (async () => {
      const res = await axios.get("/tabs");
      setlist(res.data.data);
    })();
  }, []);
  const detit = (item: any) => {
    navigate(`/tabdetitle`, { state: { item } });
  };
  return (
    <div>
      <NavBar
        className={style.nav}
        title="健康测评"
        onClickLeft={() => navigate(-1)}
      />
      <Tabs defaultActive={0}>
        {list.map((item, index) => (
          <Tabs.TabPane key={index} title={item.tab}>
            {item.list.map((item: string, index: number) => (
              <ProductCard
                onClick={() => detit(item)}
                key={index}
                desc="描述信息"
                title={item.title}
                thumb={item.img}
              />
            ))}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  );
})

export default Index;
